<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <style>
    #elem {
      width: 200px;
      height: 150px;
      background-color: red;
      padding: 20px;
      overflow: auto;
      /* position: absolute */
    }
    
    body {
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <div id="elem">
    текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
    текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
    текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
    текст текст
  </div>

  <script>
    var elem = document.getElementById("elem");

    // неверно!
    //elem.style.width = '100%';

    // верно (так как обычный div по умолчанию растягивается во всю ширину)
    //elem.style.width = 'auto';

    // верно (решение с JS)
    var bodyWidth = document.body.clientWidth;

    var style = getComputedStyle(elem);

    var bodyInnerWidth = bodyWidth - parseInt(style.paddingLeft) - parseInt(style.paddingRight);

    elem.style.width = bodyInnerWidth + 'px';
  </script>


</body>

</html>